<template>
  <div class="home">
    <el-container style="height: 100vh;">
      <el-header style="background-color: #409EFF; color: white; line-height: 60px;">
        <h2>ITS Pro 系统</h2>
      </el-header>
      
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router>
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/users">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <el-main>
          <h3>欢迎使用 ITS Pro 系统</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card shadow="hover">
                <div slot="header">
                  <span>系统信息</span>
                </div>
                <div>
                  <p><strong>前端:</strong> Vue.js + Element UI</p>
                  <p><strong>后端:</strong> Spring Boot + MyBatis Plus</p>
                  <p><strong>数据库:</strong> MySQL</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div slot="header">
                  <span>用户数据</span>
                </div>
                <div class="statistic">
                  <i class="el-icon-user"></i>
                  <span>3</span>
                </div>
                <el-button type="primary" size="small" @click="$router.push('/users')">
                  查看用户列表
                </el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
.el-header {
  display: flex;
  align-items: center;
}

.statistic {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.statistic i {
  margin-right: 10px;
  font-size: 30px;
  color: #409EFF;
}

.statistic span {
  font-weight: bold;
  font-size: 36px;
}
</style> 